import React from 'react';
import { Card, Table, Form, Input, Button, Row } from 'antd';
import { Link } from 'umi';
import AuthComponent from '@/utils/auth/AuthComponent';
import { useAttendance } from './hooks';

const Setting = ({ form }) => {
    const [query, setQuery] = React.useState({});
    const [data, loading] = useAttendance(query);
    const handleSearch = e => {
        e.preventDefault();
        const values = form.getFieldsValue();
        setQuery({ ...query, ...values });
    };
    // const handleDel = () => {};

    const columns = [
        {
            title: '所属公司',
            dataIndex: 'companyName',
            width: 200
        },
        {
            title: '考勤组名称',
            dataIndex: 'groupName'
        },
        {
            title: '操作',
            key: 'action',
            width: 100,
            render: record => (
                <span>
                    <AuthComponent code="office:attendance:groups:edit">
                        <Link to={`/office/personnelManagement/attendance/setting/edit?id=${record.id}`}>编辑</Link>
                    </AuthComponent>
                    {/* <Divider type="vertical" /> */}
                    {/* <Popconfirm title="确定要删除吗？" onConfirm={handleDel}>
                        <a>删除</a>
                    </Popconfirm> */}
                </span>
            )
        }
    ];

    return (
        <Card title="考勤设置" style={{ margin: 16 }}>
            <Row style={{ marginBottom: 16 }}>
                <Form layout="inline" onSubmit={handleSearch}>
                    <Form.Item>
                        {form.getFieldDecorator('keyword')(
                            <Input style={{ width: 248 }} placeholder="输入考勤组名称" allowClear />
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                    </Form.Item>
                </Form>
            </Row>

            <Table columns={columns} dataSource={data} pagination={false} loading={loading} rowKey="id" />
        </Card>
    );
};

export default Form.create({ name: 'Setting' })(Setting);
